import React, { Component, createRef } from "react";

import styles from "./index.module.scss";

import PropTypes from "prop-types";

class Sticky extends Component {
  //通过 ref 来获取 DOM 属性 从而来操作DOM
  //创建占位符的 ref7
  placeholderRef = createRef();
  //创建内容的ref
  contentRef = createRef();

  handleScroll = () => {
    // 占个位DOM
    const placeholderDOM = this.placeholderRef.current;
    // 内容DOM
    const contentDOM = this.contentRef.current;
    // 获取 占位符的位置
    const { top } = placeholderDOM.getBoundingClientRect();

    if (top <= 0) {
      // 固定 内容
      // classList.add 添加 class
      // classList 能够获取到 DOM 对象的样式集合（对象）
      // add() 方法用来添加样式
      contentDOM.classList.add(styles.fixed);
      placeholderDOM.style.height = `${this.props.height}px`;
    } else {
      // 取消固定
      contentDOM.classList.remove(styles.fixed);
      placeholderDOM.style.height = "0px";
    }
  };

  //在挂载阶段 绑定滚动事件
  componentDidMount() {
    window.addEventListener("scroll", this.handleScroll);
  }

  // 在卸载阶段 解除绑定事件
  componentWillUnmount() {
    window.removeEventListener("scroll", this.handleScroll);
  }
  render() {
    return (
      <>
        {/* 占位符 */}
        <div ref={this.placeholderRef}></div>
        {/* 内容 */}
        <div ref={this.contentRef}>{this.props.children}</div>
      </>
    );
  }
}

Sticky.propTypes = {
  height: PropTypes.number.isRequired,
  children: PropTypes.node.isRequired
};

export default Sticky;
